<template>
  <!-- 登陆权限  页面 账号密码登陆? 手机短信登陆 -->
  <div class="Login_permission">
    <div class="Login_permission_tite">欢迎登录严选商城</div>
    <!-- logo -->
    <div class="Login_permission_logo">
      <img
        src="http://43.138.15.137:8086/static/img/orange.05e0f3f6.png"
        alt=""
      />
    </div>
    <!-- 账号密码登陆按钮 -->
    <div class="Login_permission_account_password">
      <button @click="handleClick">账号密码登陆</button>
    </div>
    <!-- 手机短信登陆字段 -->
    <div class="Login_permission_phone">
      <p @click="handleClickLogin">手机短信登陆</p>
    </div>
  </div>
</template>

<script>
import Message from '@/utils/message';
export default {
  created() {
    // 检查是否登录
    if (!localStorage.getItem('userinfo')) {
      setTimeout(() => {
        this.handleClickText();
      }, 300);
    }
  },
  methods: {
    // 账号密码登陆按钮点击事件
    handleClick() {
      this.$router.push({ name: 'login' });
    },
    // 手机短信登陆按钮点击事件
    handleClickLogin() {
      this.$router.push({ name: 'textmessage' });
    },
    // 提示方法;
    handleClickText() {
      Message({
        message: '请先登陆',
        type: 'error',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Login_permission {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  .Login_permission_tite {
    font-size: 24px;
    font-weight: 500;
    color: #000;
    margin-bottom: 20px;
    // 字体渐变
    background: linear-gradient(60deg, #ff6600, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  // logo
  .Login_permission_logo {
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
  }
  // 账号密码登陆按钮
  .Login_permission_account_password {
    width: 280px;
    height: 40px;
    background-color: #ff6035;
    border-radius: 5px;
    margin-bottom: 20px;
    button {
      width: 100%;
      height: 100%;
      background-color: transparent;
      border: none;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  // 手机短信登陆按钮
  .Login_permission_phone {
    width: 280px;
    height: 40px;
    margin-bottom: 20px;
    p {
      width: 100%;
      height: 100%;
      background-color: transparent;
      border: none;
      font-size: 14px;
      font-weight: 500;
      color: #999;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
